<script setup lang="ts">
import CustomNavbar from './components/CustomNavbar.vue'
import { useMemberStore } from '@/stores/modules/member'
import { useAuthStore } from '@/stores/modules/userAuth'
import { onShow } from '@dcloudio/uni-app'
const memberStore = useMemberStore()
const authStore = useAuthStore()
onShow(() => {
  //每次进入页面时，获取用户认证信息
  authStore.getUserAuthInfo()
})
const userData = {
  userArticleViewResponse: {
    articleImg: [
      'https://www.wxmblog.com/devminio/oujili/2023/12/21/f209c77e-418a-4a40-8db5-bb58b9b608c1.jpg',
    ],
    articleContent: '今天动态很开心',
  },

  imgList: [
    {
      imgUrl:
        'https://www.wxmblog.com/devminio/oujili/2023/12/21/c75d2098-b663-444e-9e16-a02b4625b93f.jpg',
      id: '1',
    },
    {
      imgUrl:
        'https://www.wxmblog.com/devminio/oujili/2023/12/21/f209c77e-418a-4a40-8db5-bb58b9b608c1.jpg',
      id: '2',
    },
  ],
  id: '432432432',
}
const showLikePop = false
const isInit = true

const city = '伊春'
const showAnima = false
const animUrl = ''
const showArrowDown = true
</script>
<template>
  <view class="h-screen bg-gray-50">
    <!-- 自定义导航栏 -->
    <CustomNavbar class="fixed top-0 left-0 right-0 bg-white z-50" />
    <scroll-view class="flex-1 h-full w-full overflow-hidden" scroll-y>
      <view class="relative" v-if="isInit" :class="{ 'animate-pagePop': showAnima }">
        <view class="bg-[#f4f5f9] w-11/12 mx-auto">
          <view>
            <view class="rounded-lg overflow-hidden z-10 relative bg-white">
              <view class="relative h-[640rpx]">
                <QqhSwiper
                  :list="
                    memberStore.profile?.imgList?.split(',').map((url, index) => ({
                      imgUrl: url,
                      id: String(index + 1),
                    })) || []
                  "
                />
                <view
                  v-if="authStore.userAuthInfo.length > 0"
                  class="absolute top-[46rpx] right-[34rpx] w-[202rpx] h-[62rpx] bg-white/20 rounded-[34rpx] flex justify-center items-center"
                >
                  <text
                    class="icon-renzheng-tianchong w-2 h-2 text-[#333] flex items-center justify-center rounded-full"
                  />

                  <view class="text-[28rpx] font-normal text-[#333] ml-[14rpx]">
                    {{
                      authStore.userAuthInfo.some(
                        (item) => item.authType === 'realname' && item.authStatus === 'approved',
                      ) &&
                      authStore.userAuthInfo.some(
                        (item) => item.authType === 'education' && item.authStatus === 'approved',
                      )
                        ? '双重认证'
                        : authStore.userAuthInfo.some(
                            (item) =>
                              item.authType === 'realname' && item.authStatus === 'approved',
                          )
                        ? '实名认证'
                        : authStore.userAuthInfo.some(
                            (item) =>
                              item.authType === 'education' && item.authStatus === 'approved',
                          )
                        ? '学历认证'
                        : '未认证'
                    }}
                  </view>
                </view>
              </view>
              <QqhBaseInfoCart :userData="memberStore.profile!" :editable="false" />
            </view>
            <view>
              <view
                v-if="
                  (userData.userArticleViewResponse.articleImg !== null &&
                    userData.userArticleViewResponse.articleImg.length) ||
                  userData.userArticleViewResponse.articleContent !== null
                "
                class="w-[680rpx] bg-white rounded-[24rpx] mx-auto mt-[32rpx] h-auto text-sm"
                @click="() => {}"
              >
                <view class="pl-[40rpx] pt-[32rpx] flex flex-col">
                  <view class="flex items-center">
                    <image
                      src="@/static/images/106.svg"
                      class="w-[28rpx] h-[28rpx]"
                      mode="aspectFill"
                    ></image>
                    <view class="pl-[12rpx] text-[28rpx]">
                      {{ memberStore.profile?.gender != 'MALE' ? '她' : '他' }}的动态
                    </view>
                  </view>
                  <view
                    v-if="
                      userData.userArticleViewResponse.articleImg !== null &&
                      userData.userArticleViewResponse.articleImg.length
                    "
                    :class="[
                      'flex justify-between py-[30rpx] pr-[42rpx]',
                      userData.userArticleViewResponse.articleImg.length == 2
                        ? 'after:w-[calc(33%-10rpx)] after:content-[\'\']'
                        : '',
                    ]"
                  >
                    <image
                      v-for="item in userData.userArticleViewResponse.articleImg"
                      :key="item"
                      :src="item"
                      class="w-[calc(33%-10rpx)] h-[198rpx] rounded-[12rpx] last:ml-[10rpx]"
                      mode="aspectFill"
                    >
                    </image>
                  </view>
                </view>
              </view>
              <!-- 关于我自己 -->
              <QqhInfoCart
                title="关于我自己"
                title_icon="icon-guanyuwomen"
                :content="memberStore.profile?.aboutMe"
              />
              <QqhInfoCart
                title="兴趣爱好"
                title_icon="icon-interest"
                :content="memberStore.profile?.interest"
              />
              <QqhInfoCart
                title="心仪的Ta"
                title_icon="icon-remen"
                :content="memberStore.profile?.loveRequirement"
              />

              <view
                class="w-[686rpx] h-[98rpx] mx-auto bg-white mt-[32rpx] rounded-[24rpx] flex items-center justify-center"
              >
                <image
                  src="../../static/images/share.png"
                  class="w-[32rpx] h-[32rpx]"
                  mode="aspectFill"
                ></image>
                <text
                  class="h-[40rpx] text-[28rpx] font-extrabold text-[#434343] leading-[40rpx] ml-[16rpx]"
                >
                  将{{ memberStore.profile?.gender != 'MALE' ? '她' : '他' }}推荐给好友
                </text>
              </view>

              <view class="w-full h-[186rpx] relative flex justify-center">
                <view class="h-[40rpx] flex items-center mt-[26rpx]">
                  <view class="w-[50rpx] h-[2rpx] bg-[#bbbbbb]"></view>
                  <view
                    class="h-[40rpx] text-[28rpx] font-normal text-[#bbbbbb] leading-[40rpx] mx-[18rpx]"
                  >
                    IP属地：{{
                      memberStore.profile?.city != null ? memberStore.profile?.city : city
                    }}
                  </view>
                  <view class="w-[50rpx] h-[2rpx] bg-[#bbbbbb]"></view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <view
          class="fixed bottom-[calc(var(--window-bottom)+32rpx)] left-[146rpx] right-[146rpx] z-[111] flex flex-row items-center justify-between transition-all duration-1000"
        >
          <view class="w-[108rpx] h-[108rpx]" @click="() => {}">
            <image
              src="../../static/images/clo.png"
              class="w-full h-full"
              mode="aspectFill"
            ></image>
          </view>
          <view class="w-[108rpx] h-[108rpx]" @click="() => {}">
            <image
              src="../../static/images/con1.png"
              class="w-full h-full"
              mode="aspectFill"
            ></image>
          </view>
        </view>
        <!-- v-show="showAnima" -->
        <image
          v-if="showAnima"
          :src="animUrl"
          mode="aspectFill"
          class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[111] w-0 h-0 animate-topHide"
        >
        </image>
        <image
          v-show="showArrowDown"
          src="../../static/images/home/arrow_down_sm.png"
          mode="aspectFill"
          class="fixed bottom-[30rpx] left-1/2 -translate-x-1/2 z-[12] w-[40rpx] h-[40rpx] transition-all duration-300"
        >
        </image>
        <!-- 相关喜欢的弹窗 -->
      </view>
      <!-- 推荐结束 -->
      <view v-else class="p-[30rpx] overflow-hidden h-screen box-border flex items-center">
        <view class="relative w-[690rpx] h-[957rpx] flex flex-col items-center justify-center">
          <image
            src="../../static/images/like/nowover.png"
            class="absolute top-0 left-0 w-[690rpx] h-[957rpx]"
            mode="aspectFill"
          >
          </image>
          <view class="relative z-[1] text-center flex flex-col items-center justify-center">
            <view class="text-[#333] text-[32rpx] font-extrabold">本次推荐已结束</view>
            <view class="mt-[50rpx] text-[#333] text-[48rpx] font-extrabold"
              >下次推荐明天中午12点整</view
            >
            <view
              class="mt-[70rpx] w-[372rpx] h-[84rpx] leading-[84rpx] bg-gradient-to-r from-[#c2d2f9] to-[#c5c2f3] rounded-[84rpx] text-[#415c9e] text-[28rpx]"
              @click="() => {}"
            >
              下次推荐提醒我
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>
<style>
@keyframes pagePop {
  0% {
    top: 100rpx;
    opacity: 0.5;
  }
  100% {
    top: 0;
    opacity: 1;
  }
}

@keyframes topHide {
  0% {
    top: 50%;
    width: 0;
    height: 0;
  }
  70% {
    top: 18%;
    width: 100rpx;
    height: 100rpx;
  }
  80% {
    top: 18%;
    width: 100rpx;
    height: 100rpx;
  }
  90% {
    top: 20%;
    width: 80rpx;
    height: 80rpx;
  }
  100% {
    top: 20%;
    width: 0;
    height: 0;
  }
}

.animate-pagePop {
  animation: pagePop 0.5s linear;
}

.animate-topHide {
  animation: topHide 1s linear;
}

.dotted-line {
  background-image: repeating-linear-gradient(
    to right,
    #d1d5db 0px,
    #d1d5db 6rpx,
    transparent 6rpx,
    transparent 16rpx
  );
}
</style>
